<template>
	<view class="employee_management">
		<view class="all_employee">
			员工管理（{{employee_num}}人）
		</view>


		<u-card :head-style="headStyle" v-for="(item,index) in adminList">
			<view class="employee" slot="body">
				<view class="item">
					<view class="info">
						<text class="name">{{item.real_name}}</text>
						<text class="phone">{{item.account}}</text>
					</view>
					<view class="admin">
						{{item.roles}}
					</view>
				</view>
				<view class="employee_btn">
					<u-button size="mini" class="edit button" :custom-style="customStyle" @click="go_edit(item)">编辑
					</u-button>
					<u-button size="mini" class="delete button" :custom-style="customStyle1" @click="go_delete(item.id)">删除
					</u-button>
				</view>
			</view>

		</u-card>
		<u-modal :show-cancel-button="true" v-model="show" :content="content" @confirm="confirmClick">
			<view class="slot-content">
				您确定要删除吗？
			</view>
		</u-modal>
		<view class="submit_btn">
			<u-button @click="add_employee" shape="circle" class="btn" type="error">添加员工</u-button>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				del_id:'',
				adminList: [],
				show: false,
				content: `
									空山新雨后<br>
									天气晚来秋
								`,
				headStyle: {
					padding: 0
				},
				customStyle: {
					padding: '10rpx 40rpx', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					color: '#333'
				},
				customStyle1: {
					padding: '10rpx 40rpx', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					color: 'red'
				}
			}
		},
		onLoad() {
			this.$u.api.getAdminList().then(res => {
				console.log(res)
				if (res.status == 200) {
					this.adminList = res.data.list
				}
			})
		},
		computed: {
			employee_num() {
				return this.adminList.length || 0

			}
		},
		methods: {
			add_employee() {

				this.$u.route({
					url: 'pages/add_employee/add_employee',

				})
			},
			confirmClick(id) {
				
	
				let _this = this
				//删除操作
				_this.$u.api.deteleAdminList(this.del_id).then(res => {
					if (res.status == 200) {
						_this.$refs.uToast.show({
							title: res.msg,
							type: 'success',
							url: 'pages/employee_management/employee_management',
						})
					}
				})
			},
			go_delete(id) {
				
				this.show = true;
				this.del_id=id
				
			},
			go_edit(item) {
				console.log(item, 'itemitem')

				this.$u.route({
					url: 'pages/employee_editor/employee_editor',
					params: {
						obj: JSON.stringify(item)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f1f1f1;
	}

	.employee_management {
		padding: 18rpx 26rpx;

		.slot-content {
			font-size: 28rpx;
			color: $u-content-color;
			text-align: center;
			padding: 30rpx;
		}

		.u-card {
			margin: 20rpx 0 !important;
		}

		.item {
			display: flex;
			justify-content: space-between;

			.info {
				.name {
					font-size: 34rpx;
					font-weight: 700;
					margin-right: 12rpx;
				}

			}

			.admin {
				background-color: #f5f5f5;
				padding: 8rpx 16rpx;
				color: #333333;
				border-radius: 6rpx;
			}
		}

		.employee_btn {
			margin-top: 16rpx;
			text-align: right;

			.edit {
				margin-right: 10rpx;
			}

			.button {
				padding: 10rpx 10rpx;
			}
		}

		.submit_btn {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			padding: 20rpx 18rpx;
			background: #fff;

			.btn button {
				background: #eb3626 !important;
			}
		}
	}
</style>
